<script lang="ts" setup>
import { ref, onMounted, onUnmounted, defineProps, watch } from 'vue'
import videoJs from 'video.js'

const props = defineProps({
    options: {
        type: Object,
        default: () => ({}),
    }
})

const rVideoPlayer = ref<Element>()
let player = ref()
watch(() => props.options.sources[0].src,() => {
    console.log('看看我变了吗')
    player.value = videoJs(rVideoPlayer.value as Element, props.options)
})

onUnmounted(() => {
    if (player.value) {
        player.value.dispose()
    }
})
</script>

<template>
    <video ref="rVideoPlayer" class="video-js vjs-default-skin" style="width: 100%; height: 100%;"></video>
</template>